<template>
  <div class="scenic-spot-recommendation">
    <div class="content-wrapper">
      <MapContainer @map-ready="handleMapReady" />
      <AttractionPanel 
        v-if="panelVisible"
        :attractions="attractions" 
        :map="mapInstance"
        @update-attractions="updateAttractions"
        @panel-closed="handlePanelClosed"
        @panel-minimized="handlePanelMinimized"
        @toggle-favorite="toggleFavorite"
        @item-clicked="handleItemClick"
        ref="attractionPanel"
      />
    </div>
    
    <button v-if="!panelVisible" class="reopen-panel-btn" @click="reopenPanel">
      <i class="fas fa-eye"></i>
      <span class="tooltip">显示景点推荐</span>
    </button>
  </div>
</template>

<script>
import MapContainer from './MapContainer.vue'
import AttractionPanel from './AttractionPanel.vue'

export default {
  name: 'ScenicSpotRecommendation',
  components: {
    MapContainer,
    AttractionPanel
  },
  data() {
    return {
      mapInstance: null,
      attractions: [
        {
          id: 1,
          name: '鼓岭',
          
          description: '避暑胜地 - 福州鼓岭是著名的避暑胜地，拥有百年历史的鼓岭老街和众多西式别墅，夏季凉爽宜人。',
          rating: 4.7,
          category: '自然风光'
        },
        {
          id: 2,
          name: '烟台山',
          
          description: '历史文化街区 - 烟台山历史风貌区，集中了大量近代西洋建筑，是福州中西文化交融的见证。',
          rating: 4.8,
          category: '历史文化'
        },
        {
          id: 3,
          name: '三坊七巷',
          
          description: '历史文化街区 - 中国十大历史文化名街之一，被誉为"明清建筑博物馆"，福州人文荟萃的见证。',
          rating: 4.9,
          category: '历史文化'
        },
        {
          id: 4,
          name: '上下杭',
          
          description: '历史文化街区 - 福州历史文化街区之一，曾是福州的商业中心和航运枢纽，保留了大量明清建筑。',
          rating: 4.3,
          category: '历史文化'
        },
        {
          id: 5,
          name: '西禅古寺',
          
          description: '寺庙古刹 - 福州五大禅林之一，始建于唐代，寺内古树参天，佛像庄严，是福州重要的佛教圣地。',
          rating: 4.6,
          category: '寺庙古刹'
        },
        {
          id: 6,
          name: '闽越水镇',
          
          description: '古镇街区 - 以闽越文化为主题的水乡古镇，再现福州百年水乡风貌，是文化体验和休闲旅游的好去处。',
          rating: 4.2,
          category: '古镇街区'
        },
        {
          id: 7,
          name: '西湖公园',
          
          description: '公园休闲 - 福州历史最悠久的公园，有"福建园林明珠"之称，湖光山色，景色宜人。',
          rating: 4.5,
          category: '公园休闲'
        },
        {
          id: 8,
          name: '左海公园',
          
          description: '公园休闲 - 福州市中心的大型公园，以海洋为主题，拥有水族馆、海底世界等设施，是家庭游玩的好去处。',
          rating: 4.0,
          category: '公园休闲'
        }
      ],
      panelVisible: true,
      panelMinimized: false,
      attractionsData: [] // 你的景点数据
    }
  },
  mounted() {
    this.loadPanelState()
  },
  methods: {
    updateAttractions(newAttractions) {
      this.attractions = newAttractions
    },
    handlePanelClosed() {
      this.panelVisible = false
      this.savePanelState()
    },
    handlePanelMinimized(isMinimized) {
      this.panelMinimized = isMinimized
      this.savePanelState()
    },
    reopenPanel() {
      this.panelVisible = true
      this.$nextTick(() => {
        // 恢复面板的最小化状态
        if (this.panelMinimized) {
          this.$refs.attractionPanel.isMinimized = true
        }
      })
      this.savePanelState()
    },
    toggleFavorite(attractionId) {
      console.log('切换收藏状态:', attractionId)
      // 这里可以添加收藏逻辑
    },
    handleItemClick(attractionId) {
      console.log('景点被点击:', attractionId)
      // 这里可以添加跳转到景点详情的逻辑
    },
    
    handleMapReady(map) {
      this.mapInstance = map;
      // 将地图实例传递给AttractionPanel组件
      if (this.$refs.attractionPanel) {
        this.$refs.attractionPanel.map = map;
      }
    },
    savePanelState() {
      const state = {
        visible: this.panelVisible,
        minimized: this.panelMinimized
      }
      localStorage.setItem('attractionPanelState', JSON.stringify(state))
    },
    loadPanelState() {
      const savedState = localStorage.getItem('attractionPanelState')
      if (savedState) {
        const state = JSON.parse(savedState)
        this.panelVisible = state.visible
        this.panelMinimized = state.minimized
        
        if (this.panelVisible && this.panelMinimized) {
          // 面板是可见的但处于最小化状态，需要在下次DOM更新后设置子组件的状态
          this.$nextTick(() => {
            this.$refs.attractionPanel.isMinimized = true
          })
        }
      }
    }
  }
}
</script>

<style scoped>
.scenic-spot-recommendation {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}



.content-wrapper {
  display: flex;
  gap: 20px;
  height: calc(100vh - 180px);
  min-height: 500px;
}

.reopen-panel-btn {
  position: fixed;
  top: 80px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.reopen-panel-btn:hover {
  background: #3498db;
  color: white;
  transform: scale(1.1);
}

.reopen-panel-btn .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.reopen-panel-btn:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 900px) {
  .content-wrapper {
    flex-direction: column;
    height: auto;
  }
}

@media (max-width: 768px) {
  .reopen-panel-btn {
    top: 140px;
    right: 10px;
  }
}
</style>